<template>
	<up-card title="审批记录" :border="false">
		<template #body>
			<view slot="body">
				<uv-time-line>
					<uv-time-line-item v-if="processInstance?.endTime" backgroundColor="transparent">
						<template v-slot:node>
							<view class="uv-node"
								:style="{ backgroundColor: getNodeClassOrType(processInstance).color }">
							</view>
						</template>
						<template v-slot:content>
							<view>
								<p style="font-weight: 700">
									结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
									<up-tag size="mini" type="error">{{ processInstance?.startUser?.deptName }}</up-tag>
								</p>
							</view>
						</template>
					</uv-time-line-item>
					<uv-time-line-item backgroundColor="transparent" v-for="(item, index) in tasks" :key="index">
						<template v-slot:node>
							<view class="uv-node" :style="{ backgroundColor: getNodeClassOrType(item).color }">
							</view>
						</template>
						<template v-slot:content>
							<view>
								<p style="font-weight: 700">
									审批任务：{{ item.name }}
									<up-tag size="mini" :type="getNodeClassOrType(item).type">{{
										getDict(DICT_TYPE.BPM_TASK_STATUS, item.status) }}</up-tag>
									<wd-button v-if="!isEmpty(item.children)" size="small"
										@click="openChildrenTask(item)">
										子任务
									</wd-button>
									<wd-button size="small" v-if="item.formId > 0" @click="handleFormDetail(item)">
										查看表单
									</wd-button>
								</p>
								<!-- <up-card> -->
								<view class="audit-node" v-if="item.assigneeUser"
									style="margin-right: 30px; font-weight: normal">
									审批人：{{ item?.assigneeUser?.nickname }}
									<up-tag size="small" type="info">{{ item?.assigneeUser?.deptName }}</up-tag>
								</view>
								<view class="audit-node">
									<span v-if="item.createTime" style="font-weight: normal">创建时间：</span>
									<span style="font-weight: normal; color: #8a909c">
										{{ formatDate(item?.createTime) }}
									</span>
								</view>
								<view class="audit-node">
									<span v-if="item.endTime" style=" font-weight: normal">
										审批时间：
									</span>
									<span v-if="item.endTime" style="font-weight: normal; color: #8a909c">
										{{ formatDate(item?.endTime) }}
									</span>
								</view>
								<view class="audit-node">
									<span v-if="item.durationInMillis" style=" font-weight: normal">
										耗时：
									</span>
									<span v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
										{{ formatPast2(item?.durationInMillis) }}
									</span>
								</view>

								<p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
								<!-- </up-card> -->
							</view>
						</template>
					</uv-time-line-item>
					<uv-time-line-item backgroundColor="transparent">
						<template v-slot:node>
							<view class="uv-node" :style="{ backgroundColor: getNodeClassOrType({ status: 2 }).color }">
							</view>
						</template>
						<template v-slot:content>
							<view>
								<p style="font-weight: 700">
									发起流程：【{{ processInstance?.startUser?.nickname }}】在
									{{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
								</p>
							</view>
						</template>
					</uv-time-line-item>

				</uv-time-line>

			</view>
		</template>

	</up-card>
	<!-- 弹窗：子任务  -->
	<TaskSignList ref="taskSignListRef" />
	<!-- 弹窗：表单 -->
	<wd-popup v-model="taskFormVisible" custom-style="width:90%; max-height:60%">
		<div v-if="taskForm.rule.length > 0" style="padding: 5px;">
			<form-create v-model="taskForm.value" :option="taskForm.option" :rule="taskForm.rule" :disabled="true"/>
		</div>
		<div v-else>表单配置加载中...</div>
	</wd-popup>

</template>

<script lang="ts" setup>
	import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
	import { formatDate, formatPast2 } from '@/utils/formatTime'
	import { isEmpty } from '@/utils/is'
	import TaskSignList from './dialog/TaskSignList.vue'
	import { setConfAndFields2 } from '@/utils/formCreate'
	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	import FormCreate from '@/components/formcreate/index.vue'

	defineOptions({ name: 'BpmProcessInstanceTaskList' })

	defineProps<{
		loading ?: boolean;
		processInstance ?: any; // 允许对象，但不限制具体字段
		tasks ?: any[]; // 允许数组，但不限制具体元素类型
	}>();
	//获得审批状态
	const getDict = (type : any, value : any) => {
		const dicts = getIntDictOptions(type)
		const dict = dicts.find(item => item.value === value)
		return dict ? dict.label : '待审批'
	}
	/** 获得流程实例和任务对应的颜色 */
	const getNodeClassOrType = (item : any) => {
		const statusMap : Record<number, { type : string; color : string }> = {
			0: { type: 'primary', color: '#409eff' },
			1: { type: 'primary', color: '#409eff' },
			2: { type: 'success', color: '#67c23a' },
			3: { type: 'error', color: '#f56c6c' },
			4: { type: 'info', color: '#909399' },
			5: { type: 'warning', color: '#e6a23c' },
			6: { type: 'primary', color: '#409eff' },
			7: { type: 'primary', color: '#409eff' }
		};

		return statusMap[item.status] || { type: 'primary', color: '#67c23a' };
	};

	/** 子任务 */
	const taskSignListRef = ref()
	const openChildrenTask = (item : any) => {
		taskSignListRef.value.open(item)
	}

	/** 查看表单 */
	const fApi = ref<any>() // form-create 的 API 操作类
	const taskForm = ref({
		rule: [],
		option: {},
		value: {}
	}) // 流程任务的表单详情
	const taskFormVisible = ref(false)
	const handleFormDetail = async (row : any) => {
		// 设置表单
		// console.log('row',row);
		
		setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)

		// 弹窗打开
		taskFormVisible.value = true
		// 隐藏提交、重置按钮，设置禁用只读
		await nextTick()
	
		// fApi.value.fapi.btn.show(false)
		// fApi.value?.fapi?.resetBtn.show(false)
		// fApi.value?.fapi?.disabled(true)
	}

	/** 刷新数据 */
	const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
	const refresh = () => {
		emit('refresh')
	}
</script>


<style></style>